// 热门新闻上下轮播
import React from 'react';
import {highLight, hotimg} from '@/utils/util';
import styles from './index.less';
import { connect } from 'umi';
import { Swiper } from 'swiper';
import SwiperCore, { Pagination, Autoplay } from 'swiper';
import 'swiper/swiper-bundle.css';
import { useState, useEffect } from 'react';
import { getHotNews } from '@/services/homePage/homePage';
import type { Dispatch } from 'umi';
import {message} from "antd";

SwiperCore.use([Pagination, Autoplay]);

interface hotNewsType {
  dispatch: Dispatch
}

const HotNews: React.FC<hotNewsType> = (props) => {
  const {dispatch} = props;
  const [list, setList] = useState([]);

  useEffect(() => {
    getHotNews({})
      .then((resp) => {
        setList(resp.results);
        new Swiper('.swiper-container', {
          autoplay: {
            delay: 3000,
            disableOnInteraction: false,
          },
          effect: 'fade',
          direction: 'vertical', // 竖向轮播
          loop: true, // 无缝轮播
          observer: true,
          observeParents: true,
        });
      })
      .catch((error) => {
        throw error;
      });
  }, []);

  const getDewsDetail = async (news: any) => {
    try {
      highLight(dispatch,'NewsCenter')
      window.open(`#/newsDetail?id=${news}`);    } catch (error) {
      message.error('请联系管理员');
    }
  };

  return (
    <div>
      <div className={styles.hotContent}>
        <div className={styles.hotLeft}>
          <img src={hotimg} width={'100%'} />
        </div>
        <div className={styles.hotRight}>
          <div>
            <div className="swiper-container">
              <div className="swiper-wrapper">
                {list?.map((item) => {
                  return (
                    <div className="swiper-slide" key={item.id}>
                      <div className={styles.hotTop}>{item.title}</div>
                      {item.introduction && (
                        <div className={styles.hotBottom}>
                          <p>{item.introduction}</p>
                          <p onClick={getDewsDetail.bind('', item.id)}>
                            <a>详情 ></a>
                          </p>
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default connect()(HotNews);
